<template>
  <el-dialog
    :visible.sync="remarkVisible"
    :close-on-press-escape="true"
    :close-on-click-modal="false"
    append-to-body
    width="800px"
  >
    <template slot="title">
      <div class="tishi">
        <span>详情</span>
      </div>
    </template>
    <ul class="preview">
      <li class="preview-li" v-if="list.reader_id">
        <div class="li-label">读者证号</div>
        <div class="">
          <span>{{ list.reader_id || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.username">
        <div class="li-label">读者姓名</div>
        <div class="">
          <span>{{ list.username || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.shop_name">
        <div class="li-label">书店</div>
        <div class="">
          <span>{{ list.shop_name || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.phone">
        <div class="li-label">电话号码</div>
        <div class="">
          <span>{{ list.phone || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.id_card">
        <div class="li-label">身份证号</div>
        <div class="">
          <span>{{ list.id_card || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.certificate_type">
        <div class="li-label">证件类型</div>
        <div class="">
          <span>{{ list.certificate_type || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.certificate_num">
        <div class="li-label">证件号码</div>
        <div class="">
          <span>{{ list.certificate_num || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.card_name">
        <div class="li-label">读者证类型</div>
        <div class="">
          <span>{{ list.card_name || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.cash">
        <div class="li-label">押金</div>
        <div class="">
          <span>{{ list.cash || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.tel">
        <div class="li-label">手机号</div>
        <div class="">
          <span>{{ list.tel || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.email">
        <div class="li-label">邮箱</div>
        <div class="">
          <span>{{ list.email || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.position">
        <div class="li-label">职业</div>
        <div class="">
          <span>{{ list.position || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.culture">
        <div class="li-label">文化程度</div>
        <div class="">
          <span>{{ list.culture || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.workunit">
        <div class="li-label">工作单位</div>
        <div class="">
          <span>{{ list.workunit || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.address">
        <div class="li-label">联系地址</div>
        <div class="">
          <span>
            {{ list.province || '' }}{{ list.city || '' }}{{ list.district || ''
            }}{{ list.address || '' }}</span
          >
        </div>
      </li>
      <li class="preview-li" v-if="list.zip">
        <div class="li-label">邮政编码</div>
        <div class="">
          <span>{{ list.zip || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.remark">
        <div class="li-label">备注</div>
        <div class="">
          <span>{{ list.remark || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.create_time">
        <div class="li-label">办证时间</div>
        <div class="">
          <span>{{ list.create_time || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.settle_state">
        <div class="li-label">状态</div>
        <div class="">
          {{
            list.settle_state == 1
              ? '已结算'
              : list.settle_state == 2
              ? '结算中'
              : '未结算'
          }}
        </div>
      </li>
      <li class="preview-li" v-if="list.certificate_manage_name">
        <div class="li-label">办证操作人</div>
        <div class="">
          <span>{{ list.certificate_manage_name || '-' }}</span>
        </div>
      </li>
      <li class="preview-li" v-if="list.settle_affirm_manage_name">
        <div class="li-label">结算操作人</div>
        <div class="">
          <span v-if="list.settle_state != 1">--</span>
          <span v-else>{{ list.settle_affirm_manage_name || '-' }}</span>
        </div>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      remarkVisible: false,
      list: []
    }
  },
  methods: {
    // 父组件触发的方法
    showModal(fromData) {
      this.list = fromData.list
      this.remarkVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.preview {
  padding: 20px;
  font-size: 14px;
}
.preview-li {
  list-style: none;
  display: flex;
  margin-bottom: 30px;
}
.li-label {
  font-size: 12px;
  margin-right: 30px;
  font-weight: bold;
  width: 100px;
  text-align: right;
}

.previewCxt-box {
  max-width: 100%;
  height: 160px;
  overflow: auto;
}
.ql-container {
  flex: 1 0 auto;
  max-width: 80%;
}

.li-tags > span {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #00a9b0;
}
.dataImg {
  margin: 0 auto;
  height: 60px;
  width: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
